<!-- 
 * @description: 左边tab切换
 * @fileName: BLeftTab.vue 
 * @author: xp 
 * @date: 2024-01-12 16:21:51
-->
<template>
  <div class="b-left-tab-container">
    <div class="left-tab-container">
        <div class="left-tab-scroll default-scroll">
            <div :class="['left-tab-item', { 'selected': currentIndex == index }]" v-for="(item, index) in list" :key="index" @click="handleChangeTab(index)">{{item}}</div>
        </div>
    </div>
    <div class="right-content-container">
        <slot />
    </div>
  </div>
</template>
<script>
export default {
    props: {
        list: {
            type: Array,
            defalut: () => []
        },
        tabIndex: {
            type: Number,
            defalut: () => 0
        }
    },
    name: '',
    data () {
        return {
            currentIndex: 0, // 默认选中的第几个
        }
    },
    watch: {
        tabIndex: {
            handler(n, o) {
                this.currentIndex = n
            },
            deep: true
        }
    },
    created() {
        this.currentIndex = this.tabIndex
    }, 
    mounted() {
        
    },
    methods: {
        // 改变tab
        handleChangeTab(index) {
            // this.currentIndex = index
            this.$emit('change', index)
        },
    }
}
</script>
<style lang="scss" scoped>
.b-left-tab-container{
    display: flex;
    width: 100%;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
    .left-tab-container{
        width: 140px;
        height: calc(100vh - 96px);
        background-color: #F9FCFF;
        border-right: 1px solid #EBEEF5;
        padding: 32px 0 32px 32px;
        border-radius: 16px 0 0 16px;
        .left-tab-scroll{
            height: 100%;
            .left-tab-item{
                cursor: pointer;
                font-size: 16px;
                color: rgba(0, 0, 0, 0.45);
                line-height: 24px;
                padding-left: 12px;
                margin-bottom: 32px;
                &:last-of-type{
                    margin-bottom: 0;
                }
            }
            .selected{
                position: relative;
                color: #0969DB;
                &::before{
                    position: absolute;
                    left: 0;
                    top: 4px;
                    bottom: 5px;
                    width: 4px;
                    background: #0969DB;
                    content: '';
                }
            }
        }
    }
    .right-content-container{
        flex: 1;
    }
}
</style>